<%@page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@page import="com.skali.portal.util.Constants"%>
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@page import="com.liferay.portal.kernel.util.StringPool"%>
<%@page import="javax.portlet.PortletURL"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.skali.cabdirectories.model.CABDirectories_Metadata"%>
<%@page import="com.skali.cabdirectories.service.CABDirectories_MetadataLocalServiceUtil"%>
<%@page import="java.util.List"%>
<%@page import="com.liferay.portal.kernel.util.ListUtil"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<portlet:defineObjects />

<portlet:resourceURL var="searchRequestURL">
</portlet:resourceURL>

<link href="<%=request.getContextPath()%>/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="<%=request.getContextPath()%>/css/demo_table_jui.css" rel="stylesheet" type="text/css"/>
<link href="<%=request.getContextPath()%>/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"/>
<link href="<%=request.getContextPath()%>/css/demo_page.css" rel="stylesheet" type="text/css"/>
<link href="<%=request.getContextPath()%>/css/demo_table.css" rel="stylesheet" type="text/css"/>

<script src="<%=request.getContextPath() %>/js/jquery.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/js/jquery-1.10.2.min.js" type="text/javascript" ></script>
<script src="<%=request.getContextPath() %>/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/js/bPopUp.js" type="text/javascript"></script>


<%
String sammNo = ParamUtil.getString(request, "sammNo"); 
System.out.println(">>>>>>>  sammNo recevd in view.jsp  = "+sammNo);
String cabSearchType = ParamUtil.getString(request,"cabType","acb");
if(cabSearchType.length()>0){
System.out.println(" cabSearchType recevd in cab-Display VIEW.jsp >>>>>>>>> "+cabSearchType);
}

%>

<aui:layout cssClass="cab_directories_display">
	<aui:layout>
		<aui:column cssClass="cabdisplay_header" columnWidth="50">
			<liferay-ui:message key="column" />
		</aui:column>
		<aui:column cssClass="cabdisplay_header" columnWidth="50">
			<liferay-ui:message key="filter" />
		</aui:column>
	</aui:layout>
	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
			<liferay-ui:message key="<%=cabSearchType %>" />
		</aui:column>
		<aui:column cssSlass="aui-input" columnWidth="50">
			<input id="acbno" name="samm_no" onkeyup="doSearchAjaxCall();" type="text" value="" />
		</aui:column>
	</aui:layout>

	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="organization_name" />
		</aui:column>
		<aui:column cssSlass="aui-input" columnWidth="50">
			<input id="organizationName" name="organizationName" onkeyup="doSearchAjaxCall();" type="text" value="" />
		</aui:column>
	</aui:layout>

	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="field" />
		</aui:column>
		<aui:column cssSlass="aui-input" columnWidth="50">
			<input id="field" name="field" onkeyup="doSearchAjaxCall();" type="text" value="" />
		</aui:column>
	</aui:layout>

<%if(cabSearchType.equalsIgnoreCase("acb")|| cabSearchType.equalsIgnoreCase("sam")){ %>
	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="program" />
		</aui:column>
		<aui:column columnWidth="50">
			<aui:select cssSlass="aui-input" name="" id="program">
				<aui:option value="0">--SELECT--</aui:option>
				<aui:option value="">111</aui:option>
				<aui:option value="">2222</aui:option>
			</aui:select>
		</aui:column>
	</aui:layout>
<%} %>

<%if(cabSearchType.equalsIgnoreCase("sam")){ %>
	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="sub-program" />
		</aui:column>
		<aui:column columnWidth="50">
			<aui:select cssSlass="aui-input" name="">
				<aui:option value="0">--SELECT--</aui:option>
				<aui:option value="">111</aui:option>
				<aui:option value="">2222</aui:option>
			</aui:select>
		</aui:column>
	</aui:layout>
<%} %>

	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="status" />
		</aui:column>
		<aui:column cssSlass="aui-input" columnWidth="50">
			<aui:select name="">
				<aui:option value="0">--SELECT--</aui:option>
				<aui:option value="1">status1</aui:option>
				<aui:option value="2">status2</aui:option>
			</aui:select>
		</aui:column>
	</aui:layout>

	<aui:layout cssClass="cab_display_form">
		<aui:column cssClass="aui-label" columnWidth="50">
				<liferay-ui:message key="sub_status" />
		</aui:column>
		<aui:column cssSlass="aui-input" columnWidth="50">
			<aui:select name="">
				<aui:option value="0">--SELECT--</aui:option>
				<aui:option value="1">sub_status111</aui:option>
				<aui:option value="2">sub_status2222</aui:option>
			</aui:select>
		</aui:column>
	</aui:layout>
	
</aui:layout>

<%
	 String SammNoUrlParam = StringPool.BLANK;
	 PortletURL showPopUpURL = renderResponse.createRenderURL();
	 showPopUpURL.setParameter("jspPage", "/html/cabdirectoriesdisplay/viewDetails.jsp");
	 showPopUpURL.setWindowState(LiferayWindowState.EXCLUSIVE);
%>

<div id="divId1">
	
	<div id="docSearchDiv">
		<liferay-ui:message key="search_details" />
		<input id="docSearch" name="docSearch" type="text" onblur="doSearchAjaxCall();" value=""/>
	</div>	
	<table id="tableId1">
		<thead>
			<tr>
				<th> Samm No </th>
				<th> Field </th>
				<th> Organization Name </th>
				<th> Scope </th>
			</tr>
		</thead>
		<tbody>
			<tr id="rowId1">
				<td id="sammNo"></td>
				<td id="field"></td>
				<td id="organizationName"></td>
				<td id="scopeUrl"></td>
			</tr>
		</tbody> 
	</table>
</div>

<div>
	<a data-toggle="modal" role="button" href="#myModal5" id="slide_out_link">Edtech Associates Sdn Bhd, Penang</a>
	<div id="panel1" style="background: #fff;width: 560px">
	
	</div>
</div>





<script>

jQuery().ready(function(){

$("#panel1").hide();

var cabSearchType = "<%=cabSearchType %>";
	
jQuery.ajax({
		type: "POST",
		url: "<%=searchRequestURL.toString()%>",
		data:"cabSearchType="+cabSearchType+"&acbno="+""+"&orgName="+""+"&field="+"",
		error: function(data) {
			alert(" inside error >>> "+data);
		},
		success: function(data) {
			console.log(" jQuery-ready >> success data>>  "+data);
			 loadDataTable(data);
		}
	});  
	//<!-- end-of-jQuery-Ajax -->
	
});  
//<!-- end-of-jQuery-ready -->	

function slideInPopUp(){
	$('#panel1').bPopup({
			    opacity: 0.6,
	            speed: 250,
	            transition: 'slideUp'
		});
} 


function doSearchAjaxCall() {
	
	var cabSearchType = "<%=cabSearchType %>";
	var acbno = jQuery("#acbno").val();
	var orgName = jQuery("#organizationName").val();
	var field = jQuery("#field").val();
	var program = jQuery("#program").val();
											<!-- //##NOT WORKING ### alert("program = "+program); -->
	var keyword = jQuery("#docSearch").val();
 //	<!-- alert(" keyword = "+keyword); -->
 	
	jQuery.ajax({
		type: "POST",
		url: "<%=searchRequestURL.toString()%>",
		data:"acbno="+acbno+"&orgName="+orgName+"&field="+field+"&keyword="+keyword+"&cabSearchType="+cabSearchType,
		error: function(data) {
			alert(" inside error >>> "+data);
		},
		success: function(data) {
			console.log("success data>>  "+data);
			loadDataTable(data);
		}
	});
}

function loadDataTable(data){
	
	 console.log("loadDataTable >>  "+data);
     $("#tableId1").dataTable().fnDestroy();
	 var oTable = $('#tableId1').dataTable({
	 			//<!-- "sPaginationType": "full_numbers", -->
				"aaData" : data,
				"aoColumns" : [ 
						{"sTitle" : "SammNo" },
						{ "sTitle" : "OrganizationName"	},
						{ "sTitle" : "Field" },
						{"sTitle" : "Scope" }
				 	 ]
				});
}


function invokePopUp(sammNo){

	jQuery.ajax({
		type: "POST",
		url: "<%=searchRequestURL.toString()%>",
		data:"sammNo="+sammNo,
		error: function(data) {
			alert(" inside error >>> "+data);
		},
		success: function(data) {
			console.log("success data>>  "+data);

		    $("#panel1").html(data); 
		    $('#panel1').bPopup({
		            speed: 250,
		            transition: 'slideDown'
		       });
		}
	});
	
}


</script>



<style type="text/css">

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

.aui-label ,#docSearchDiv {
	float: right;
	}

.aui-input ,#liferaySearch {
	float: left;
}

.cab_directories_display .cabdisplay_header{
	color: #000000;
    font-size: 17px;
    font-weight: bold;
}

.cab_directories_display .cab_display_form{
	border-top: 1px solid #DDDDDD;
    line-height: 20px;
    padding: 8px;
}

.cab_directories_display{
	background: #EDEDED;
}

.cab_directories_display .aui-column-content.aui-label-content {
    font-size: 14px;
}

.cab_directories_display .aui-field-input{
	width: 220px;
}

.dataTables_length select{
	width: 75px;
}

</style>